<template>
  <div class="purchase-contract-container">
    <el-steps :active="activeStep" finish-status="success" simple>
      <el-step title="房源信息"></el-step>
      <el-step title="买卖双方"></el-step>
      <el-step title="交易条款"></el-step>
      <el-step title="确认信息"></el-step>
    </el-steps>

    <div class="form-content">
      <!-- 第一步：房源信息 -->
      <div v-show="activeStep === 0">
        <h3>房源信息</h3>
        <el-form :model="form" label-width="120px">
          <el-form-item label="房源地址" prop="propertyAddress" required>
            <el-input v-model="form.propertyAddress" placeholder="请输入完整房源地址"></el-input>
          </el-form-item>

          <el-form-item label="房产证号" prop="propertyCertificate" required>
            <el-input v-model="form.propertyCertificate" placeholder="请输入房产证号"></el-input>
          </el-form-item>

          <el-form-item label="建筑面积" prop="area" required>
            <el-input-number v-model="form.area" :min="0" :precision="2"></el-input-number>
            <span class="unit">平方米</span>
          </el-form-item>

          <el-form-item label="房屋类型" prop="propertyType" required>
            <el-select v-model="form.propertyType" placeholder="请选择房屋类型">
              <el-option label="商品房" value="commercial"></el-option>
              <el-option label="经济适用房" value="affordable"></el-option>
              <el-option label="房改房" value="reform"></el-option>
              <el-option label="别墅" value="villa"></el-option>
              <el-option label="商铺" value="shop"></el-option>
              <el-option label="写字楼" value="office"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="成交价格" prop="price" required>
            <el-input-number v-model="form.price" :min="0" :precision="2"></el-input-number>
            <span class="unit">万元</span>
          </el-form-item>
        </el-form>
      </div>

      <!-- 第二步：买卖双方 -->
      <div v-show="activeStep === 1">
        <h3>买卖双方信息</h3>
        <el-tabs v-model="activePartyTab">
          <el-tab-pane label="买方信息" name="buyer">
            <el-form :model="form.buyerInfo" label-width="120px">
              <el-form-item label="姓名" prop="name" required>
                <el-input v-model="form.buyerInfo.name"></el-input>
              </el-form-item>
              <el-form-item label="身份证号" prop="idNumber" required>
                <el-input v-model="form.buyerInfo.idNumber"></el-input>
              </el-form-item>
              <el-form-item label="联系电话" prop="phone" required>
                <el-input v-model="form.buyerInfo.phone"></el-input>
              </el-form-item>
              <el-form-item label="通讯地址" prop="address">
                <el-input v-model="form.buyerInfo.address"></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="卖方信息" name="seller">
            <el-form :model="form.sellerInfo" label-width="120px">
              <el-form-item label="姓名" prop="name" required>
                <el-input v-model="form.sellerInfo.name"></el-input>
              </el-form-item>
              <el-form-item label="身份证号" prop="idNumber" required>
                <el-input v-model="form.sellerInfo.idNumber"></el-input>
              </el-form-item>
              <el-form-item label="联系电话" prop="phone" required>
                <el-input v-model="form.sellerInfo.phone"></el-input>
              </el-form-item>
              <el-form-item label="通讯地址" prop="address">
                <el-input v-model="form.sellerInfo.address"></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 第三步：交易条款 -->
      <div v-show="activeStep === 2">
        <h3>交易条款</h3>
        <el-form :model="form" label-width="160px">
          <el-form-item label="付款方式" prop="paymentMethod" required>
            <el-radio-group v-model="form.paymentMethod">
              <el-radio label="full">全款支付</el-radio>
              <el-radio label="installment">分期付款</el-radio>
              <el-radio label="loan">银行贷款</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item v-if="form.paymentMethod === 'installment'" label="分期计划" prop="installmentPlan" required>
            <el-input
                v-model="form.installmentPlan"
                type="textarea"
                :rows="3"
                placeholder="请输入分期付款的具体计划，包括各期金额和支付时间"
            ></el-input>
          </el-form-item>

          <el-form-item v-if="form.paymentMethod === 'loan'" label="贷款银行" prop="loanBank">
            <el-input v-model="form.loanBank" placeholder="请输入贷款银行名称"></el-input>
          </el-form-item>

          <el-form-item label="定金金额" prop="deposit" required>
            <el-input-number v-model="form.deposit" :min="0" :precision="2"></el-input-number>
            <span class="unit">万元</span>
          </el-form-item>

          <el-form-item label="交房时间" prop="deliveryDate" required>
            <el-date-picker
                v-model="form.deliveryDate"
                type="date"
                placeholder="选择交房日期"
                value-format="YYYY-MM-DD"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="违约责任" prop="breachOfContract" required>
            <el-input
                v-model="form.breachOfContract"
                type="textarea"
                :rows="4"
                placeholder="详细描述违约责任条款"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>

      <!-- 第四步：确认信息 -->
      <div v-show="activeStep === 3">
        <h3>确认购房合同信息</h3>
        <div class="summary-container">
          <div class="summary-section">
            <h4>房源信息</h4>
            <p><span class="label">房源地址:</span> {{ form.propertyAddress }}</p>
            <p><span class="label">房产证号:</span> {{ form.propertyCertificate }}</p>
            <p><span class="label">建筑面积:</span> {{ form.area }} 平方米</p>
            <p><span class="label">房屋类型:</span> {{ formatPropertyType(form.propertyType) }}</p>
            <p><span class="label">成交价格:</span> {{ form.price }} 万元</p>
          </div>

          <div class="summary-section">
            <h4>买方信息</h4>
            <p><span class="label">姓名:</span> {{ form.buyerInfo.name }}</p>
            <p><span class="label">身份证号:</span> {{ form.buyerInfo.idNumber }}</p>
            <p><span class="label">联系电话:</span> {{ form.buyerInfo.phone }}</p>
            <p><span class="label">通讯地址:</span> {{ form.buyerInfo.address }}</p>
          </div>

          <div class="summary-section">
            <h4>卖方信息</h4>
            <p><span class="label">姓名:</span> {{ form.sellerInfo.name }}</p>
            <p><span class="label">身份证号:</span> {{ form.sellerInfo.idNumber }}</p>
            <p><span class="label">联系电话:</span> {{ form.sellerInfo.phone }}</p>
            <p><span class="label">通讯地址:</span> {{ form.sellerInfo.address }}</p>
          </div>

          <div class="summary-section">
            <h4>交易条款</h4>
            <p><span class="label">付款方式:</span> {{ formatPaymentMethod(form.paymentMethod) }}</p>
            <p v-if="form.installmentPlan"><span class="label">分期计划:</span> {{ form.installmentPlan }}</p>
            <p v-if="form.loanBank"><span class="label">贷款银行:</span> {{ form.loanBank }}</p>
            <p><span class="label">定金金额:</span> {{ form.deposit }} 万元</p>
            <p><span class="label">交房时间:</span> {{ form.deliveryDate }}</p>
            <p><span class="label">违约责任:</span> {{ form.breachOfContract }}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="form-actions">
      <el-button @click="prevStep" v-if="activeStep > 0">上一步</el-button>
      <el-button type="primary" @click="nextStep" v-if="activeStep < 3">下一步</el-button>
      <el-button type="success" @click="submitForm" v-if="activeStep === 3">提交合同</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const activeStep = ref(0)
const activePartyTab = ref('buyer')

const form = reactive({
  propertyAddress: '',
  propertyCertificate: '',
  area: null,
  propertyType: '',
  price: null,
  paymentMethod: 'full',
  installmentPlan: '',
  loanBank: '',
  deposit: null,
  deliveryDate: '',
  breachOfContract: '买方违约，定金不退；卖方违约，双倍返还定金',
  buyerInfo: {
    name: '',
    idNumber: '',
    phone: '',
    address: ''
  },
  sellerInfo: {
    name: '',
    idNumber: '',
    phone: '',
    address: ''
  }
})

const formatPropertyType = (type) => {
  const types = {
    commercial: '商品房',
    affordable: '经济适用房',
    reform: '房改房',
    villa: '别墅',
    shop: '商铺',
    office: '写字楼'
  }
  return types[type] || type
}

const formatPaymentMethod = (method) => {
  const methods = {
    full: '全款支付',
    installment: '分期付款',
    loan: '银行贷款'
  }
  return methods[method] || method
}

const nextStep = () => {
  if (activeStep.value === 0) {
    if (!form.propertyAddress || !form.propertyCertificate || !form.area || !form.propertyType || !form.price) {
      ElMessage.error('请填写完整的房源信息')
      return
    }
  } else if (activeStep.value === 1) {
    if (!form.buyerInfo.name || !form.buyerInfo.idNumber || !form.buyerInfo.phone ||
        !form.sellerInfo.name || !form.sellerInfo.idNumber || !form.sellerInfo.phone) {
      ElMessage.error('请填写完整的买卖双方信息')
      return
    }
  } else if (activeStep.value === 2) {
    if (!form.paymentMethod || !form.deposit || !form.deliveryDate || !form.breachOfContract) {
      ElMessage.error('请填写完整的交易条款')
      return
    }
    if (form.paymentMethod === 'installment' && !form.installmentPlan) {
      ElMessage.error('请填写分期付款计划')
      return
    }
    if (form.paymentMethod === 'loan' && !form.loanBank) {
      ElMessage.error('请填写贷款银行信息')
      return
    }
  }
  activeStep.value++
}

const prevStep = () => {
  activeStep.value--
}

const submitForm = () => {
  ElMessage.success('购房合同提交成功')
  // 这里可以添加实际提交逻辑
  console.log('合同信息:', form)
}
</script>

<style scoped>
.purchase-contract-container {
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.form-content {
  margin: 30px 0;
  min-height: 500px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.summary-container {
  background: #f5f7fa;
  padding: 20px;
  border-radius: 4px;
}

.summary-section {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.summary-section h4 {
  margin-bottom: 10px;
  color: #409eff;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

.summary-section p {
  margin: 8px 0;
  line-height: 1.6;
}

.summary-section .label {
  display: inline-block;
  width: 100px;
  color: #666;
  font-weight: bold;
}

.unit {
  margin-left: 10px;
  color: #666;
}

.el-tabs {
  margin-top: 20px;
}

.el-form-item {
  margin-bottom: 22px;
}
</style>